<template>
  <el-dialog
    class="eldialog"
    :visible.sync="visible"
    :title="title"
    :close-on-click-modal="false"
    append-to-body
    top="10vh"
    width="50%"
    :close-on-press-escape="false"
    :before-close="closeVisible"
  >
    <el-form ref="form" :model="formQuery" label-width="140px">
      <el-form-item label="管理制度">
        <el-select v-model="formQuery.managementSystem" @change="handleManagementSystemChange" placeholder="请选择" style="width:200px;">
            <el-option
                v-for="item in optionsManagement"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
        </el-select>（如制定是否包含以下内容）
      </el-form-item>
      <el-form-item label="管理制度附件">
        <el-upload class="upload-demo"
                  ref="upload"
                  :action="uploadUrl" 
                  :on-preview="handlePreview"
                  :on-success="uploadSuccess"
                  :before-upload="before_upload"
                  :multiple="fileMultiple"
                  :limit="1" :file-list="fileList"
                  :disabled="formQuery.managementSystem === 0"
                  >
          <el-button type="primary">(请上传电子版)</el-button>
          <div slot="tip" class="el-upload__tip">
            允许上传pdf格式,且不超过100MB
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="网络运行安全">
        <el-select v-model="formQuery.netRunSafe" placeholder="请选择" style="width:200px;" 
                   :disabled="formQuery.managementSystem === 0">
            <el-option
                v-for="item in optionsNetRunSafe"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="网络信息安全">
        <el-select v-model="formQuery.netMessageSafe" placeholder="请选择" style="width:200px;" 
                  :disabled="formQuery.managementSystem === 0">
            <el-option
                v-for="item in optionsNetMessageSafe"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="监测预警与应急处理">
        <el-select v-model="formQuery.warnDispose" placeholder="请选择" style="width:200px;" 
                  :disabled="formQuery.managementSystem === 0">
            <el-option
                v-for="item in optionsWarnDispose"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeVisible()">取 消</el-button>
      <el-button type="primary" @click="submitForm()">保 存</el-button>
    </span>
  </el-dialog>
</template>
  
<script>
import {getSystemSave,getSystemUpdate,getSystem} from "@/api/datacentersg/personnelPut/personnelPut.js"
import store from "@/store";
import webapp from "@/config/webapp";

class Photo {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}
export default {
  data() {
    return {
      visible: false,
      title: "",
      name: "",
      formQuery:{
          managementSystem: "",
          netRunSafe: "",
          netMessageSafe: "",
          warnDispose:"",
          managementFile:"",
      },
      uploadUrl: webapp.uploadUrl,
      fileMultiple: false,
      fileList:[],
      optionsManagement:[
        {
            value: 0,
            label: '暂无'
        },
        {
            value: 1,
            label: '有'
        },
      ],
      optionsNetRunSafe:[
        {
            value: 0,
            label: '暂无'
        },
        {
            value: 1,
            label: '有'
        },
      ],
      optionsNetMessageSafe:[
        {
            value: 0,
            label: '暂无'
        },
        {
            value: 1,
            label: '有'
        },
      ],
      optionsWarnDispose:[
        {
            value: 0,
            label: '暂无'
        },
        {
            value: 1,
            label: '有'
        },
      ],
      systemRowId:"",
    };
  },
  methods: {
    systemInit(title, systemRow) {
      this.visible = true;
      this.title = title;
      if(this.title == "编辑"){
        this.systemRowId = systemRow.id;
        this.getSystemDetail();
      }
    },
    getSystemDetail(){
        const params = {
          userId:store.getters.user_id.toString(),
          token:store.getters.token.toString(),
          data:{
              id:this.systemRowId,
          }
        }
        getSystem(params).then((result) =>{
          if(result.result){
            this.formQuery.managementSystem = result.resultdata.managementSystem
            this.formQuery.netRunSafe = result.resultdata.netRunSafe
            this.formQuery.netMessageSafe = result.resultdata.netMessageSafe
            this.formQuery.warnDispose = result.resultdata.warnDispose
            this.formQuery.managementFile = result.resultdata.managementFile;
            const photoList = [];
            if (result.resultdata.managementFile) {
              photoList.push(new Photo("管理制度附件", result.resultdata.managementFile));
            } else {
              this.fileList = [];
            }
            this.fileList = photoList;
          }
        })

    },
    handleManagementSystemChange(value) {
        if (value === 0) { // 选择了"暂无"
          this.fileList = [];
          this.formQuery.managementFile = "";
        }
    },
    submitForm() {
      if (this.title === "新增") {
        const params = {
           userId:store.getters.user_id.toString(),
           token:store.getters.token.toString(),
           data:{
              managementSystem:this.formQuery.managementSystem,
              netRunSafe:this.formQuery.netRunSafe,
              netMessageSafe:this.formQuery.netMessageSafe,
              warnDispose:this.formQuery.warnDispose,
              managementFile:this.formQuery.managementFile,
           }
        }
        getSystemSave(params).then((result) =>{
          if(result.result){
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.closeVisible();
              this.$emit("initData");
            }
        })
      } else if (this.title === "编辑") {
        const params = {
          userId:store.getters.user_id.toString(),
          token:store.getters.token.toString(),
          data:{
            id:this.systemRowId,
            managementSystem:this.formQuery.managementSystem,
            netRunSafe:this.formQuery.netRunSafe,
            netMessageSafe:this.formQuery.netMessageSafe,
            warnDispose:this.formQuery.warnDispose,
            managementFile:this.formQuery.managementFile,
          }
        }
        getSystemUpdate(params).then((result) => {
              if(result.result){
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.closeVisible();
                this.$emit("initData");
              }
        })
      }
    },
    handlePreview(file) {
      window.open(file.url);
    },
    before_upload(file) {
        // console.log(file,"filename");
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
        console.log(fileType);
        // 判断文件名的类型，允许多种就判断多个
        if (fileType == 'pdf') {
            console.log(file);
        } else {
            this.$message({
                message: '文件类型必须为pdf格式',
                type: 'warning'
            });
            // 返回false 就不会执行上传操作了
            return false
        }
    },
    uploadSuccess(response, file, fileList){
        this.$message.success("上传成功！")
        this.formQuery.managementFile = response.url; 
    },
    closeVisible() {
      this.visible = false;
      this.formQuery.managementSystem = "";
      this.formQuery.netRunSafe = "";
      this.formQuery.netMessageSafe = "";
      this.formQuery.warnDispose = "";
      this.formQuery.managementFile = "";
      this.fileList=[];
    },
  },
};
</script>
  
<style scoped>
/* >>>.el-icon-close{
  display: none !important;
}
>>>.el-icon-close-tip{
  display:none !important;
} */
</style>